<template>
	<div class="system-staff-container">
		<el-dialog v-model="state.isShowDialog" :fullscreen="true" width="769px" center>
			<template #title>
				<div style="font-size: large; border-radius: 0 !important" v-drag="['.system-staff-container', '.system-staff-container .el-dialog__header']">
					{{ title }}
				</div>
			</template>
			<el-form label-position="top" :model="state.ruleForm" :rules="state.ruleRules" ref="ruleFormRef" label-width="80px">
				<el-space style="margin-top: 40px; margin-bottom: 20px" direction="vertical">
					<el-text tag="b">基本信息</el-text>
				</el-space>
				<div class="row">
					<el-form-item label="姓名" prop="name">
						<el-input v-model="state.ruleForm.name" placeholder="请输入姓名" />
					</el-form-item>
					<el-form-item label="用户性别" prop="sex">
						<el-select v-model="state.ruleForm.sex" placeholder="请选择">
							<el-option v-for="dict in state.sexOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="生日" prop="birthday">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.birthday"
							type="date"
							value-format="YYYY-MM-DD"
							placeholder="选择生日"
						>
						</el-date-picker>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="婚姻状态" prop="isMarriage">
						<el-select v-model="state.ruleForm.isMarriage" placeholder="请选择婚姻状态">
							<el-option v-for="dict in state.marriageOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue">{{
								dict.dictLabel
							}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="政治面貌" prop="politicalOutlook">
						<el-input v-model="state.ruleForm.politicalOutlook" placeholder="请输入政治面貌" />
					</el-form-item>
					<el-form-item label="国籍（地区）" prop="nation">
						<el-input style="width: 200px" v-model="state.ruleForm.nation" placeholder="请输入国籍" />
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="户籍地址" prop="registeredAddress">
						<el-input v-model="state.ruleForm.registeredAddress" placeholder="请输入户籍地址" />
					</el-form-item>
				</div>
				<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
					<el-text tag="b">身份证件</el-text>
				</el-space>
				<div class="row">
					<el-form-item label="证件类型" prop="idType">
						<el-select v-model="state.ruleForm.idType" placeholder="请选择证件类型">
							<el-option v-for="dict in state.idTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue">{{
								dict.dictLabel
							}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="证件号码" prop="idCard">
						<el-input v-model="state.ruleForm.idCard" placeholder="请输入证件号码" />
					</el-form-item>
					<el-form-item label="证件有效期起" prop="validStart">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.validStart"
							type="date"
							value-format="YYYY-MM-DD"
							placeholder="选择证件有效期起"
						>
						</el-date-picker>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="证件有效期止" prop="validEnd">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.validEnd"
							type="date"
							value-format="YYYY-MM-DD"
							placeholder="选择证件有效期止"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item label="证件正面" prop="id_front">
						<Upload :imageSrc="state.idFrontImg" @handleUpload="(data) => handleUpload(data, 'id_front')"> </Upload>
					</el-form-item>
					<el-form-item label="证件反面" prop="id_back">
						<Upload :imageSrc="state.idBackImg" @handleUpload="(data) => handleUpload(data, 'id_back')"> </Upload>
					</el-form-item>
				</div>
				<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
					<el-text tag="b">护照信息</el-text>
				</el-space>
				<div class="row">
					<el-form-item label="护照英文名" prop="passportName">
						<el-input v-model="state.ruleForm.passportName" placeholder="请输入护照英文名" />
					</el-form-item>
					<el-form-item label="护照有效期起" prop="passportValidStart">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.passportValidStart"
							type="date"
							value-format="YYYY-MM-DD"
							placeholder="选择护照有效期起"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item label="护照有效期止" prop="passportValidEnd">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.passportValidEnd"
							type="date"
							value-format="YYYY-MM-DD"
							placeholder="选择护照有效期止"
						>
						</el-date-picker>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="护照个人信息页" prop="passport_img">
						<Upload :imageSrc="state.passportImg" @handleUpload="(data) => handleUpload(data, 'passport_img')"> </Upload>
					</el-form-item>
				</div>
				<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
					<el-text tag="b">任职信息</el-text>
				</el-space>
				<div class="row">
					<el-form-item label="任职身份" prop="positionIdentity">
						<el-input v-model="state.ruleForm.positionIdentity" placeholder="请输入任职身份" />
					</el-form-item>
					<el-form-item label="职位工种" prop="positionType">
						<el-input v-model="state.ruleForm.positionType" placeholder="请输入职位工种" />
					</el-form-item>
					<el-form-item label="职位状态" prop="positionStatus">
						<el-select v-model="state.ruleForm.positionStatus" placeholder="请选择职位状态">
							<el-option v-for="op in state.positionStatusOptions" :key="op.dictValue" :value="op.dictValue" :label="op.dictLabel">{{
								op.dictLabel
							}}</el-option>
						</el-select>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="职位级别" prop="positionLevel">
						<el-input v-model="state.ruleForm.positionLevel" placeholder="请输入职位级别" />
					</el-form-item>
					<el-form-item label="部门" prop="householdNature">
						<el-select v-model="state.ruleForm.organizationId" placeholder="请选择用人部门">
							<el-option v-for="op in organizationOption" :key="op.value" :value="op.value" :label="op.label">{{ op.label }}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="职务" prop="positionId">
						<el-select v-model="state.ruleForm.positionId" placeholder="请选择职务">
							<el-option v-for="op in postsOption" :key="op.value" :value="op.value" :label="op.label">{{ op.label }}</el-option>
						</el-select>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="基础薪资" prop="baseSalary">
						<el-input v-model="state.ruleForm.baseSalary" placeholder="请输入基础薪资" />
					</el-form-item>
					<el-form-item label="入职日期" prop="joinedDate">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.joinedDate"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="选择入职日期"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item label="转正日期" prop="confirmationDate">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.confirmationDate"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="选择转正日期"
						>
						</el-date-picker>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="离职日期" prop="terminationDate">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.terminationDate"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="选择离职日期"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item label="离职性质" prop="terminationNature">
						<el-input v-model="state.ruleForm.terminationNature" placeholder="请输入离职性质" />
					</el-form-item>
					<el-form-item label="离职原因" prop="terminationReason">
						<el-input v-model="state.ruleForm.terminationReason" placeholder="请输入离职原因" />
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="督导" prop="supervision">
						<el-input v-model="state.ruleForm.supervision" placeholder="请输入督导" />
					</el-form-item>
					<el-form-item label="说明" prop="des">
						<el-input type="textarea" v-model="state.des.text" placeholder="请输入说明" />
					</el-form-item>
				</div>
				<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
					<el-text tag="b">通讯方式</el-text>
				</el-space>
				<div class="row">
					<el-form-item label="联系电话" prop="phone">
						<el-input v-model="state.ruleForm.phone" placeholder="请输入联系电话" />
					</el-form-item>
					<el-form-item label="电子邮箱" prop="email">
						<el-input v-model="state.ruleForm.email" placeholder="请输入电子邮箱" />
					</el-form-item>
					<el-form-item label="紧急联系人" prop="emergencyContact">
						<el-input v-model="state.ruleForm.emergencyContact" placeholder="请输入紧急联系人" />
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="与紧急联系人关系" prop="emergencyConnect">
						<el-input v-model="state.ruleForm.emergencyConnect" placeholder="请输入与紧急联系人关系" />
					</el-form-item>
					<el-form-item label="紧急联系人电话" prop="emergencyPhone">
						<el-input v-model="state.ruleForm.emergencyPhone" placeholder="请输入紧急联系人电话" />
					</el-form-item>
					<el-form-item label="家庭住址" prop="homeAddress">
						<el-input v-model="state.ruleForm.homeAddress" placeholder="请输入家庭住址" />
					</el-form-item>
				</div>
				<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
					<el-text tag="b">社保公积金</el-text>
				</el-space>
				<div class="row">
					<el-form-item label="社保编号" prop="socialNumber">
						<el-input v-model="state.ruleForm.socialNumber" placeholder="请输入社保编号" />
					</el-form-item>
					<el-form-item label="户籍性质" prop="householdNature">
						<el-select v-model="state.ruleForm.householdNature" placeholder="请选择户籍性质">
							<el-option v-for="dict in state.householdNatureOptions" :value="dict.dictValue" :key="dict.dictValue" :label="dict.dictLabel">{{
								dict.dictLabel
							}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="参保城市" prop="securityCity">
						<el-input v-model="state.ruleForm.securityCity" placeholder="请输入参保城市" />
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="社保参保方案" prop="securityMethod">
						<el-input v-model="state.ruleForm.securityMethod" placeholder="请输入社保参保方案" />
					</el-form-item>
					<el-form-item label="社保参保日期" prop="securityDateStart">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.securityDateStart"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="选择社保参保日期"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item label="社保停保日期" prop="securityDateEnd">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.securityDateEnd"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="选择社保停保日期"
						>
						</el-date-picker>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="公积金缴存基数" prop="accumulationBase">
						<el-input v-model="state.ruleForm.accumulationBase" placeholder="请输入公积金缴存基数" />
					</el-form-item>
					<el-form-item label="公积金起缴日期" prop="accumulationDateStart">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.accumulationDateStart"
							type="date"
							value-format="YYYY-MM-DD"
							placeholder="选择公积金起缴日期"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item label="公积金停缴日期" prop="accumulationDateEnd">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.accumulationDateEnd"
							type="date"
							value-format="YYYY-MM-DD"
							placeholder="选择公积金停缴日期"
						>
						</el-date-picker>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="公积金账号" prop="accumulationAccount">
						<el-input v-model="state.ruleForm.accumulationAccount" placeholder="请输入公积金账号" />
					</el-form-item>

					<el-form-item label="开户行" prop="bankName">
						<el-input v-model="state.ruleForm.bankName" placeholder="请输入开户行" />
					</el-form-item>
					<el-form-item label="银行卡号" prop="bankNumber">
						<el-input v-model="state.ruleForm.bankNumber" placeholder="请输入银行卡号" />
					</el-form-item>
				</div>

				<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
					<el-text tag="b">学历信息</el-text>
				</el-space>
				<div class="row">
					<el-form-item label="学历" prop="levelEducation">
						<el-select v-model="state.ruleForm.levelEducation" placeholder="请选择学历">
							<el-option v-for="dict in state.levelEducationOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue">{{
								dict.dictLabel
							}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="毕业院校" prop="graduationSchool">
						<el-input v-model="state.ruleForm.graduationSchool" placeholder="请输入毕业院校" />
					</el-form-item>
					<el-form-item label="专业" prop="major">
						<el-input v-model="state.ruleForm.major" placeholder="请输入专业" />
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="毕业时间" prop="graduationDate">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.graduationDate"
							type="date"
							value-format="YYYY-MM-DD"
							placeholder="选择毕业时间"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item label="毕业证书（附件）" prop="diploma">
						<Upload
							type="file"
							:fileData="state.diploma"
							@handleDelete="(fileId) => handleDelete(fileId, 'diploma')"
							@handleUpload="(data) => handleUpload(data, 'diploma')"
						>
						</Upload>
					</el-form-item>
					<el-form-item label="技能等级证书（列表附件）" prop="level_certificate">
						<Upload
							type="file"
							:fileData="state.levelCertificate"
							@handleDelete="(fileId) => handleDelete(fileId, 'levelCertificate')"
							@handleUpload="(data) => handleUpload(data, 'levelCertificate')"
						>
						</Upload>
					</el-form-item>
				</div>
				<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
					<el-text tag="b">协议信息</el-text>
				</el-space>
				<div class="row">
					<el-form-item label="协议签订时间" prop="dealSignDate">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.dealSignDate"
							type="date"
							value-format="YYYY-MM-DD"
							placeholder="选择协议签订时间"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item label="协议截止日期" prop="dealEndDate">
						<el-date-picker
							clearable
							style="width: 200px"
							v-model="state.ruleForm.dealEndDate"
							type="date"
							value-format="YYYY-MM-DD"
							placeholder="选择协议截止日期"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item label="劳动合同（附件）" prop="laborContract">
						<Upload
							type="file"
							:fileData="state.laborContract"
							@handleDelete="(fileId) => handleDelete(fileId, 'laborContract')"
							@handleUpload="(data) => handleUpload(data, 'laborContract')"
						>
						</Upload>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="保密协议（附件）" prop="passportName">
						<Upload
							type="file"
							:fileData="state.confidentialityDeal"
							@handleDelete="(fileId) => handleDelete(fileId, 'confidentialityDeal')"
							@handleUpload="(data) => handleUpload(data, 'confidentialityDeal')"
						>
						</Upload>
					</el-form-item>
					<el-form-item label="竞业协议（附件）" prop="competeDeal">
						<Upload
							type="file"
							:fileData="state.competeDeal"
							@handleDelete="(fileId) => handleDelete(fileId, 'competeDeal')"
							@handleUpload="(data) => handleUpload(data, 'competeDeal')"
						>
						</Upload>
					</el-form-item>
					<el-form-item label="应聘简历（附件）" prop="resume">
						<Upload
							type="file"
							:fileData="state.resume"
							@handleDelete="(fileId) => handleDelete(fileId, 'resume')"
							@handleUpload="(data) => handleUpload(data, 'resume')"
						>
						</Upload>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="入职体检报告（附件）" prop="examination">
						<Upload
							type="file"
							:fileData="state.examination"
							@handleDelete="(fileId) => handleDelete(fileId, 'examination')"
							@handleUpload="(data) => handleUpload(data, 'examination')"
						>
						</Upload>
					</el-form-item>
				</div>
				<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
					<el-text tag="b">评审记录</el-text>
				</el-space>
				<editable
					:tableSourceData="state.recordList"
					:columns="recordTableConfig.columns"
					:rules="recordTableConfig.rules"
					@getList="getRecordList"
				/>

				<el-space direction="vertical" style="margin-top: 40px; margin-bottom: 20px">
					<el-text tag="b">账户信息</el-text>
				</el-space>
				<editable
					:tableSourceData="state.accountList"
					:columns="accountTableConfig.columns"
					:rules="accountTableConfig.rules"
					@getList="getAccountList"
				/>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit" :loading="state.loading">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="editStaff">
import { reactive, ref, unref, getCurrentInstance, watch } from 'vue';
import { updateStaff, addStaff, getStaff } from '@/api/staff/api';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import type { UploadProps } from 'element-plus';
// import SvgIcon from '@/components/component/svgIcon/index.vue';
import { uploadFile, getFileUrl } from '../../../../utils/util';
import editable from './editTable.vue';
import Upload from '@/components/upload/index.vue';
import { AnyCnameRecord } from 'dns';

const props = defineProps({
	title: {
		type: String,
		default: () => '',
	},
	organizationOption: {
		type: Array,
		default: () => [],
	},
	postsOption: {
		type: Array,
		default: () => [],
	},
	sysFiles: {
		type: Array,
		default: () => [],
	},
});

const { proxy } = getCurrentInstance() as any;
const ruleFormRef = ref<HTMLElement | null>(null);
const imageUrl = ref('');
const recordTableConfig = {
	columns: [
		{
			label: '记录编号',
			prop: 'recordNumber',
			type: 'isInput',
		},
		{
			label: '记录类型',
			prop: 'reviewType',
			type: 'isInput',
		},
		{
			label: '记录结果',
			prop: 'reviewResult',
			type: 'isInput',
		},
		{
			label: '记录日期',
			prop: 'reviewDate',
			type: 'isDate',
		},
	],
	rules: {
		recordNumber: [{ required: true, message: '请输入编号', trigger: 'blur' }],
		reviewType: [{ required: true, message: '请输入类型', trigger: 'blur' }],
		reviewResult: [{ required: true, message: '请输入记录结果', trigger: 'blur' }],
		reviewDate: [{ required: true, message: '请选择记录日期', trigger: 'blur' }],
	},
};
const accountTableConfig = {
	columns: [
		{
			label: '平台名称',
			prop: 'systemName',
			type: 'isInput',
		},
		{
			label: '账户名',
			prop: 'accountName',
			type: 'isInput',
		},
		{
			label: '密码',
			prop: 'password',
			type: 'isInput',
		},
		{
			label: '备注',
			prop: 'remark',
			type: 'isInput',
		},
	],
	rules: {
		systemName: [{ required: true, message: '请输入平台名称', trigger: 'blur' }],
		accountName: [{ required: true, message: '请输入类型', trigger: 'blur' }],
		password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
	},
};
const state = reactive({
	// 是否显示弹出层
	isShowDialog: false,
	loading: false,
	depOptions: [], // 部门列表
	dep: {}, // 选择的部门
	recordList: [], // Review records
	accountList: [], // 账户信息列表
	sysFiles: [],
	des: { text: '' }, // 描述
	idFrontImg: undefined, // 身份证正面
	idBackImg: undefined, // 身份证反面
	passportImg: undefined, // 护照,
	levelCertificate: undefined, // 技能书
	diploma: [] as any, // 毕业证书
	laborContract: [] as any, // 劳动合同
	confidentialityDeal: [] as any, // 保密协议
	resume: [] as any, // 简历
	competeDeal: [] as any, // 竞业协议
	examination: [] as any, // 体检报告
	// 表单数据
	ruleForm: {
		validStart: '',
		accumulationAccount: '',
		accumulationBase: undefined,
		accumulationDateEnd: undefined,
		accumulationDateStart: undefined,
		bankName: '',
		bankNumber: '',
		baseSalary: undefined,
		birthday: undefined,
		competeDeal: '',
		confidentialityDeal: '',
		confirmationDate: '',
		dealEndDate: undefined,
		dealSignDate: undefined,
		organizationId: undefined,
		departmentName: '',
		des: '',
		diploma: undefined,
		email: '',
		emergencyConnect: '',
		emergencyContact: '',
		emergencyPhone: '',
		graduationDate: undefined,
		graduationSchool: '',
		homeAddress: '',
		householdNature: undefined,
		staffId: undefined,
		idBack: '',
		idCard: '',
		idFront: '',
		id_type: undefined,
		joinedDate: undefined,
		laborContract: '',
		levelCertificate: undefined,
		levelEducation: undefined,
		major: '',
		isMarriage: undefined,
		name: '',
		nation: '',
		passportImg: '',
		passportName: '',
		passportNumber: '',
		passportValidEnd: '',
		passportValidStart: '',
		phone: '',
		politicalOutlook: '',
		positionId: undefined,
		positionIdentity: '',
		positionJob: '',
		positionLevel: '',
		positionStatus: undefined,
		positionType: '',
		registeredAddress: '',
		resume: '',
		examination: '',
		securityCity: '',
		securityDateEnd: undefined,
		securityDateStart: undefined,
		securityMethod: undefined,
		sex: '',
		socialNumber: '',
		supervision: '',
		terminationDate: '',
		terminationNature: undefined,
		terminationReason: '',
		validEnd: '',
	},
	// householdNatureOptions字典数据
	householdNatureOptions: [],
	// idTypeOptions字典数据
	idTypeOptions: [],
	// levelEducationOptions字典数据
	levelEducationOptions: [],
	// marriageOptions字典数据
	marriageOptions: [],
	// positionStatusOptions字典数据
	positionStatusOptions: [],
	// sexOptions字典数据
	sexOptions: [],
	// 表单校验
	ruleRules: {
		name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
	},
});

watch(
	() => state.ruleForm,
	(newVal, oldVal) => {
		console.log('ruleForm 发生变化');
		console.log('新值:', newVal);
		console.log('旧值:', oldVal);

		// 在这里可以执行其他逻辑操作
	},
	{ deep: true }
);

// 监听身份证图片
watch(
	() => state.ruleForm.idFront,
	(newVal, oldVal) => {
		if (!state.ruleForm.idFront) return;
		getFileUrl(state.ruleForm.idFront).then((resUrl) => {
			state.idFrontImg = resUrl;
			console.log('state.idFrontImg', state.idFrontImg);
		});
	}
);

watch(
	() => state.ruleForm.idBack,
	(newVal, oldVal) => {
		if (!state.ruleForm.idBack) return;
		getFileUrl(state.ruleForm.idBack).then((resUrl) => {
			state.idBackImg = resUrl;
		});
	}
);

watch(
	() => state.ruleForm.passportImg,
	(newVal, oldVal) => {
		if (!state.ruleForm.passportImg) return;
		getFileUrl(state.ruleForm.passportImg).then((resUrl) => {
			state.passportImg = resUrl;
		});
	}
);

// 毕业证书
watch(
	() => state.ruleForm.diploma,
	(newVal, oldVal) => {
		if (!state.ruleForm.diploma) return;
		const arr = state.ruleForm.diploma ? state.ruleForm.diploma.split(',') : [];
		const newData: any = [];
		arr.forEach((item: any) => {
			const findObj: any = state.sysFiles.find((itemF: any) => itemF.file_id == item) || {};
			if (findObj.file_id) {
				newData.push({
					name: findObj.file_name,
					url: findObj.file_path,
					id: findObj.file_id,
				});
			}
		});
		state.diploma = newData;
	}
);

// 劳动合同
watch(
	() => state.ruleForm.laborContract,
	(newVal, oldVal) => {
		if (!state.ruleForm.laborContract) return;
		const arr = state.ruleForm.laborContract ? state.ruleForm.laborContract.split(',') : [];
		const newData: any = [];
		arr.forEach((item: any) => {
			const findObj: any = state.sysFiles.find((itemF: any) => itemF.file_id == item) || {};
			if (findObj.file_id) {
				newData.push({
					name: findObj.file_name,
					url: findObj.file_path,
					id: findObj.file_id,
				});
			}
		});
		state.laborContract = newData;
	}
);

// 保密协议
watch(
	() => state.ruleForm.confidentialityDeal,
	(newVal, oldVal) => {
		if (!state.ruleForm.confidentialityDeal) return;
		const arr = state.ruleForm.confidentialityDeal ? state.ruleForm.confidentialityDeal.split(',') : [];
		const newData: any = [];
		arr.forEach((item: any) => {
			const findObj: any = state.sysFiles.find((itemF: any) => itemF.file_id == item) || {};
			if (findObj.file_id) {
				newData.push({
					name: findObj.file_name,
					url: findObj.file_path,
					id: findObj.file_id,
				});
			}
		});
		state.confidentialityDeal = newData;
	}
);

// 竞业协议
watch(
	() => state.ruleForm.competeDeal,
	(newVal, oldVal) => {
		if (!state.ruleForm.competeDeal) return;
		const arr = state.ruleForm.competeDeal ? state.ruleForm.competeDeal.split(',') : [];
		const newData: any = [];
		arr.forEach((item: any) => {
			const findObj: any = state.sysFiles.find((itemF: any) => itemF.file_id == item) || {};
			if (findObj.file_id) {
				newData.push({
					name: findObj.file_name,
					url: findObj.file_path,
					id: findObj.file_id,
				});
			}
		});
		state.competeDeal = newData;
	}
);

// 应聘简历
watch(
	() => state.ruleForm.resume,
	(newVal, oldVal) => {
		if (!state.ruleForm.resume) return;
		const arr = state.ruleForm.resume ? state.ruleForm.resume.split(',') : [];
		const newData: any = [];
		arr.forEach((item: any) => {
			const findObj: any = state.sysFiles.find((itemF: any) => itemF.file_id == item) || {};
			if (findObj.file_id) {
				newData.push({
					name: findObj.file_name,
					url: findObj.file_path,
					id: findObj.file_id,
				});
			}
		});
		state.resume = newData;
	}
);

// 入职体检报告
watch(
	() => state.ruleForm.examination,
	(newVal, oldVal) => {
		if (!state.ruleForm.examination) return;
		const arr = state.ruleForm.examination ? state.ruleForm.examination.split(',') : [];
		const newData: any = [];
		arr.forEach((item: any) => {
			const findObj: any = state.sysFiles.find((itemF: any) => itemF.file_id == item) || {};
			if (findObj.file_id) {
				newData.push({
					name: findObj.file_name,
					url: findObj.file_path,
					id: findObj.file_id,
				});
			}
		});
		state.examination = newData;
	}
);
// 技能登记证书
watch(
	() => state.ruleForm.levelCertificate,
	(newVal, oldVal) => {
		if (!state.ruleForm.levelCertificate) return;
		const arr = state.ruleForm.levelCertificate ? state.ruleForm.levelCertificate.split(',') : [];
		const newData: any = [];
		arr.forEach((item: any) => {
			const findObj: any = state.sysFiles.find((itemF: any) => itemF.file_id == item) || {};
			if (findObj.file_id) {
				newData.push({
					name: findObj.file_name,
					url: findObj.file_path,
					id: findObj.file_id,
				});
			}
		});
		state.levelCertificate = newData;
	}
);

// 获取评审记录
const getRecordList = (data: any) => {
	state.recordList = data;
	console.log('state.recordList', state.recordList);
};

// 获取账户信息
const getAccountList = (data: any) => {
	state.accountList = data;
};

const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
	imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
	if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error('Avatar picture size can not exceed 2MB!');
		return false;
	}
	console.log('rawFile', rawFile);

	return true;
};

const handleUpload = (data: any, sign: string) => {
	if (data.res) {
		if (sign == 'id_front') {
			state.ruleForm.idFront = data.res;
		} else if (sign == 'id_back') {
			state.ruleForm.idBack = data.res;
		} else if (sign == 'passport_img') {
			state.ruleForm.passportImg = data.res;
		} else if (sign == 'diploma') {
			const diplomaArr: any = state.ruleForm.diploma ? state.ruleForm.diploma.split(',') : [];
			diplomaArr.push(data.res);
			getStaff({ isLink: true }).then((res) => {
				state.ruleForm.diploma = diplomaArr.join(',');
				state.sysFiles = res.sys_files;
			});
		} else if (sign == 'laborContract') {
			const dataArr: any = state.ruleForm.laborContract ? state.ruleForm.laborContract.split(',') : [];
			dataArr.push(data.res);
			getStaff({ isLink: true }).then((res) => {
				state.ruleForm.laborContract = dataArr.join(',');
				state.sysFiles = res.sys_files;
			});
		} else if (sign == 'confidentialityDeal') {
			const dataArr: any = state.ruleForm.confidentialityDeal ? state.ruleForm.confidentialityDeal.split(',') : [];
			dataArr.push(data.res);
			getStaff({ isLink: true }).then((res) => {
				state.ruleForm.confidentialityDeal = dataArr.join(',');
				state.sysFiles = res.sys_files;
			});
		} else if (sign == 'competeDeal') {
			const dataArr: any = state.ruleForm.competeDeal ? state.ruleForm.competeDeal.split(',') : [];
			dataArr.push(data.res);
			getStaff({ isLink: true }).then((res) => {
				state.ruleForm.competeDeal = dataArr.join(',');
				state.sysFiles = res.sys_files;
			});
		} else if (sign == 'resume') {
			const dataArr: any = state.ruleForm.resume ? state.ruleForm.resume.split(',') : [];
			dataArr.push(data.res);
			getStaff({ isLink: true }).then((res) => {
				state.ruleForm.resume = dataArr.join(',');
				state.sysFiles = res.sys_files;
			});
		} else if (sign == 'examination') {
			const dataArr: any = state.ruleForm.examination ? state.ruleForm.examination.split(',') : [];
			dataArr.push(data.res);
			getStaff({ isLink: true }).then((res) => {
				state.ruleForm.examination = dataArr.join(',');
				state.sysFiles = res.sys_files;
			});
		} else if (sign == 'levelCertificate') {
			const dataArr: any = state.ruleForm.levelCertificate ? state.ruleForm.levelCertificate.split(',') : [];
			dataArr.push(data.res);
			getStaff({ isLink: true }).then((res) => {
				state.ruleForm.levelCertificate = dataArr.join(',');
				state.sysFiles = res.sys_files;
			});
		}
	}
};

const handleDelete = (fileId: string, sign: string) => {
	if (fileId) {
		if (sign == 'diploma') {
			const diplomaArr: any = state.ruleForm.diploma ? state.ruleForm.diploma.split(',') : [];
			const newDiplomaArr = diplomaArr.filter((item: any) => item != fileId);
			state.diploma = state.diploma.filter((item: any) => item.id != fileId);
			getStaff({ isLink: true }).then((res) => {
				state.sysFiles = res.sys_files;
				state.ruleForm.diploma = newDiplomaArr.join(',');
			});
		} else if (sign == 'laborContract') {
			const dataArr: any = state.ruleForm.laborContract ? state.ruleForm.laborContract.split(',') : [];
			const newDataArr = dataArr.filter((item: any) => item != fileId);
			state.laborContract = state.laborContract.filter((item: any) => item.id != fileId);
			getStaff({ isLink: true }).then((res) => {
				state.sysFiles = res.sys_files;
				state.ruleForm.laborContract = newDataArr.join(',');
			});
		} else if (sign == 'confidentialityDeal') {
			const dataArr: any = state.ruleForm.confidentialityDeal ? state.ruleForm.confidentialityDeal.split(',') : [];
			const newDataArr = dataArr.filter((item: any) => item != fileId);
			state.confidentialityDeal = state.confidentialityDeal.filter((item: any) => item.id != fileId);
			getStaff({ isLink: true }).then((res) => {
				state.sysFiles = res.sys_files;
				state.ruleForm.confidentialityDeal = newDataArr.join(',');
			});
		} else if (sign == 'competeDeal') {
			const dataArr: any = state.ruleForm.competeDeal ? state.ruleForm.competeDeal.split(',') : [];
			const newDataArr = dataArr.filter((item: any) => item != fileId);
			state.competeDeal = state.competeDeal.filter((item: any) => item.id != fileId);
			getStaff({ isLink: true }).then((res) => {
				state.sysFiles = res.sys_files;
				state.ruleForm.competeDeal = newDataArr.join(',');
			});
		} else if (sign == 'resume') {
			const dataArr: any = state.ruleForm.resume ? state.ruleForm.resume.split(',') : [];
			const newDataArr = dataArr.filter((item: any) => item != fileId);
			state.resume = state.resume.filter((item: any) => item.id != fileId);
			getStaff({ isLink: true }).then((res) => {
				state.sysFiles = res.sys_files;
				state.ruleForm.resume = newDataArr.join(',');
			});
		} else if (sign == 'examination') {
			const dataArr: any = state.ruleForm.examination ? state.ruleForm.examination.split(',') : [];
			const newDataArr = dataArr.filter((item: any) => item != fileId);
			state.examination = state.examination.filter((item: any) => item.id != fileId);
			getStaff({ isLink: true }).then((res) => {
				state.sysFiles = res.sys_files;
				state.ruleForm.examination = newDataArr.join(',');
			});
		} else if (sign == 'levelCertificate') {
			const dataArr: any = state.ruleForm.levelCertificate ? state.ruleForm.levelCertificate.split(',') : [];
			const newDataArr = dataArr.filter((item: any) => item != fileId);
			state.levelCertificate = state.levelCertificate.filter((item: any) => item.id != fileId);
			getStaff({ isLink: true }).then((res) => {
				state.sysFiles = res.sys_files;
				state.ruleForm.levelCertificate = newDataArr.join(',');
			});
		}
	}
};

// 打开弹窗
const openDialog = (row: any) => {
	const newRow = JSON.parse(JSON.stringify(row));
	state.ruleForm = newRow;
	state.recordList = (newRow.reviewRecords && JSON.parse(newRow.reviewRecords)) || [];
	state.accountList = (newRow.accountInfo && JSON.parse(newRow.accountInfo)) || [];
	state.des = (newRow.des && JSON.parse(newRow.des)) || { text: '' };
	state.isShowDialog = true;
	state.loading = false;
	state.sysFiles = props.sysFiles;
	proxy.getDicts('hr_household_nature').then((response: any) => {
		state.householdNatureOptions = response.data;
	});
	proxy.getDicts('hr_id_type').then((response: any) => {
		state.idTypeOptions = response.data;
	});
	proxy.getDicts('hr_level_education').then((response: any) => {
		state.levelEducationOptions = response.data;
	});
	proxy.getDicts('hr_is_marriage').then((response: any) => {
		state.marriageOptions = response.data;
	});
	proxy.getDicts('hr_position_status').then((response: any) => {
		state.positionStatusOptions = response.data;
	});
	proxy.getDicts('sys_user_sex').then((response: any) => {
		state.sexOptions = response.data;
	});
};
// 关闭弹窗
const closeDialog = (row?: object) => {
	proxy.mittBus.emit('onEditStaffModule', row);
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};

// 保存
const onSubmit = () => {
	const formWrap = unref(ruleFormRef) as any;
	if (!formWrap) return;
	formWrap.validate((valid: boolean) => {
		if (valid) {
			state.loading = true;
			if (state.ruleForm.staffId != undefined && state.ruleForm.staffId != 0) {
				const newForm: any = {};
				Object.keys(state.ruleForm).forEach((item) => {
					if (item != 'staffId') {
						newForm[item] = state.ruleForm[item];
					}
				});
				newForm.reviewRecords = JSON.stringify(state.recordList);
				newForm.accountInfo = JSON.stringify(state.accountList);
				newForm.des = JSON.stringify(state.des);
				updateStaff(state.ruleForm.staffId, newForm).then((results) => {
					ElMessage.success('修改成功');
					state.loading = false;
					closeDialog(state.ruleForm); // 关闭弹窗
				});
			} else {
				const params = {
					...state.ruleForm,
					reviewRecords: JSON.stringify(state.recordList),
					accountInfo: JSON.stringify(state.accountList),
					des: JSON.stringify(state.des),
				};
				addStaff(params).then((response) => {
					ElMessage.success('新增成功');
					closeDialog(state.ruleForm); // 关闭弹窗
					state.recordList = [];
					state.accountList = [];
					state.des = { text: '' };
				});
			}
		}
	});
};

defineExpose({
	openDialog,
});
</script>

<style scoped>
/deep/.el-dialog {
	border-radius: 0 !important;
}
.row {
	display: flex;
	justify-content: space-between;
	gap: 20px;

	.el-form-item {
		width: 33.33%;
	}
}
.avatar-uploader .avatar {
	width: 78px;
	height: 78px;
	display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 78px;
	height: 78px;
	text-align: center;
}
</style>
